<template>
  <div>
    <!--用户信息-->
    <el-card>
      <el-row v-if='userInfo_'>
        <el-col :offset="1" :span="2">
          <el-avatar v-if="userInfo_.tb_user.headimg === null || userInfo_.tb_user.headimg === ''" :size="100" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <el-avatar v-else :size="100" :src="userInfo_.tb_user.headimg"></el-avatar>
        </el-col>
        <el-col :offset="1" :span="13">
          <!--昵称-->
          <span class="account-center-username">{{ userInfo_.tb_user.username }}</span>
          <!--等级-->
          <el-tag class="lv" size="mini" effect="dark">LV.{{userInfo_.tb_user.lv.lv }}</el-tag>
          <!--称号-->
          <span class="account-center-designation">扫除新秀</span>
          <!--通行证id-->
          <span class="accont-center-id">邮箱:{{ userInfo_.tb_user.email }}</span>
          <!--签名-->
          <div class="accont-center-sign">
            <font-awesome-icon :icon="['fas', 'signature']" class="fa-lg" style="color: #fb7199"></font-awesome-icon>
            <span class="accont-center-sign-content" v-if="userInfo_.tb_user.sign === null || userInfo_.tb_user.sign === ''">系统原装签名，送给每一位小可爱</span>
            <span class="accont-center-sign-content" v-else>{{ userInfo_.tb_user.sign }}</span>
          </div>
          <el-button size="medium" type="primary" plain @click="goMyInfo">编辑</el-button>
          <el-button size="medium" type="primary" plain @click="singIn()">签到</el-button>
        </el-col>
        <el-col :span="6" class="account-center-header-datas">
          <div class="account-center-header-data">
            <a href="" class="account-center-header-data-num">{{ userInfo_.user_fans_count }}</a>
            <div class="account-center-header-data-label">
              <svg-icon class="account-center-header-data-label-icon" icon-class="fans" />
              <span>粉丝</span>
            </div>
          </div>
          <el-divider direction="vertical" content-position="center"></el-divider>
          <div class="account-center-header-data">
            <a href="" class="account-center-header-data-num">{{ userInfo_.user_follow_count }}</a>
            <div class="account-center-header-data-label">
              <font-awesome-icon class="account-center-header-data-label-icon" :icon="['far', 'heart']"></font-awesome-icon>
              <span>关注</span>
            </div>
          </div>
          <el-divider direction="vertical" content-position="center"></el-divider>
          <div class="account-center-header-data">
            <a href="" class="account-center-header-data-num">{{ userInfo_.fabulous_count }}</a>
            <div class="account-center-header-data-label">
              <font-awesome-icon class="account-center-header-data-label-icon" :icon="['far', 'thumbs-up']"></font-awesome-icon>
              <span>获赞</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <!--<el-empty v-else></el-empty>-->
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data () {
    return {}
  },
  created () {},
  // DOM对象加载完成时
  mounted () {},
  methods: {
    goMyInfo () {
      this.$router.push('/center/myinfo')
    },
    singIn () {
      this.$memory.getUser().then(userString => {
        if (userString === null) {
          return
        }
        const user = JSON.parse(userString)
        // console.log(user)
        const id = user.id
        console.log(id)
        const url = this.$config.urls.get('sign_in') + id
        this.$http.get(url).then(res => {
          if (res.data.code !== 0) {
            this.$message.warning(res.data.error_message)
          }
          this.$message.success('签到成功！')
        })
      })
    }
  },
  watch: {
    // userInfo: function () {
    //   this.$nextTick(function () {
    //     // 方法
    //   })
    // }
  },
  computed: { ...mapGetters('userCenter', { userInfo_: 'userInfo' }) },
  name: 'userInfo'
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 30px;
}

a:hover {
  color: #00c3ff;
}

.account-center-username {
  font-weight: bold;
}

.account-center-designation {
  margin-right: 8px;
}

.accont-center-sign {
  margin: 10px 0;
}

.accont-center-id,
.accont-center-sign-content {
  color: #999999;
}

.accont-center-sign-content {
  margin-left: 8px;
}

.account-center-header-datas {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.account-center-header-data-label {
  position: relative;
  right: 12px;
  //color: #00c3ff;
  .account-center-header-data-label-icon {
    color: #f56c6c;
  }
}
</style>
